import React from 'react';
import { connect, history } from 'umi';
import {Dropdown, Layout, Menu} from 'antd';
import {
  HomeOutlined,
  OrderedListOutlined,
  EditOutlined,
  FileAddOutlined, MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined
} from '@ant-design/icons';
import Sider from "antd/es/layout/Sider";
import {Content, Header} from "antd/es/layout/layout";
import Avatar from "antd/es/avatar/avatar";
import './layout.less'

class UserHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed:false
    }
  }

  // handler
  handleClick = e => {
    if (history.location.pathname !== e.key) history.push(e.key);
  };

  render(){
    return (
        <Layout hasSider style={{height:"100vh"}}>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo" />
            <Menu theme="dark" onClick={this.handleClick} defaultSelectedKeys={['/user/userHome']} selectedKeys={history.location.pathname} mode="inline">
              <Menu.Item key="/user/userHome">
                <HomeOutlined />
                用户信息
              </Menu.Item>
              <Menu.Item key="/user/productList">
                <OrderedListOutlined />
                饮用水出售商城
              </Menu.Item>
              <Menu.Item key="/user/userDemand">
                <EditOutlined />
                用户需求发布
              </Menu.Item>
              <Menu.Item key="/user/machineInfo">
                <FileAddOutlined />
                饮用水信息
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background">
              {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: this.toggle,
              })}
              <div className='Avatar'>
                            <span style={{ marginRight:'15px'}}>
                                {this.props.username}
                            </span>
                <Dropdown overlay={
                  <Menu onClick={this.handleClick}>
                    <Menu.Item key={'/login'}>
                      登 出
                    </Menu.Item>
                  </Menu>
                }>
                  <Avatar icon={<UserOutlined />} />
                </Dropdown>

              </div>
            </Header>
            <Content className="content">
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
    )
  }
}

function mapStateToProps({ loginModel }) {
  const { username } = loginModel;
  return { username };
}

export default connect(mapStateToProps)(UserHeader);
